@@include('include/header.html',{"name": "form","desc": "表单"})

<section id="form">
    <div class="demo-item">
        <p class="demo-desc">命令表单项</p>
        <div class="demo-block">
            <div class="ui-form ui-border-t">
                <form action="#" >
                    <div class="ui-form-item ui-form-item-order ui-border-b">
                        <a href="#">清空消息列表</a>
                    </div>
                    <div class="ui-form-item ui-form-item-order ui-border-b">
                        <a href="#">清空所有聊天记录</a>
                    </div>
                    <div class="ui-form-item ui-form-item-order ui-border-b">
                        <a href="#">清空缓存数据</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="demo-item">
        <p class="demo-desc">命令表单项</p>
        <div class="demo-block">
            <div class="ui-form ui-border-t">
                <form action="#" >
                    <div class="ui-form-item ui-form-item-link ui-border-b">
                        <a href="#">展示链接</a>
                    </div>
                    <div class="ui-form-item ui-form-item-link ui-border-b">
                        <a href="#">展示链接</a>
                    </div>
                    <div class="ui-form-item ui-form-item-link ui-border-b">
                        <a href="#">展示链接</a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="demo-item">
        <p class="demo-desc">表单输入项</p>
        <div class="demo-block">
            <div class="ui-form ui-border-t">
                <form action="#">
                    <div class="ui-form-item ui-border-b">
                        <label>
                            身份证号码
                        </label>
                        <input type="text" placeholder="18位身份证号码" />
                        <a href="#" class="ui-icon-close">
                        </a>
                    </div>
                    <div class="ui-form-item ui-form-item-textarea ui-border-b">
                        <label>
                            详细地址
                        </label>
                        <textarea placeholder="街道等详细地址"></textarea>
                    </div>
                    <div class="ui-form-item ui-form-item-l ui-border-b">
                        <label class="ui-border-r">
                            中国 +86
                        </label>
                        <input type="text" placeholder="请输入手机号码" />
                        <a href="#" class="ui-icon-close">
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="demo-item">
        <p class="demo-desc">表单输入项3</p>
        <div class="demo-block">
            <div class="ui-form ui-border-t">
                <form action="#">
                    <div class="ui-form-item ui-form-item-pure ui-border-b">
                        <input type="text" placeholder="QQ号/手机号/邮箱">
                        <a href="#" class="ui-icon-close"></a>
                    </div>
                    <div class="ui-form-item ui-form-item-pure ui-border-b">
                        <input type="password" placeholder="密码">
                        <a href="#" class="ui-icon-close"></a>
                    </div>
                    <div class="ui-form-item ui-form-item-r ui-border-b">
                        <input type="text" placeholder="请输入验证码">
                        <!-- 若按钮不可点击则添加 disabled 类 -->
                        <button type="button" class="ui-border-l">重新发送</button>
                        <a href="#" class="ui-icon-close"></a>
                    </div>
                </form>
            </div>
            </div>
    </div>
    <div class="demo-item">
        <p class="demo-desc">表单开关项</p>
        <div class="demo-block">
            <div class="ui-form ui-border-t">
                <form action="#">
                    <div class="ui-form-item ui-form-item-switch ui-border-b">
                        <p>
                            对附近的人可见
                        </p>
                        <label class="ui-switch">
                            <input type="checkbox" />
                        </label>
                    </div>
                    <div class="ui-form-item ui-form-item-switch ui-border-b">
                        <p>
                            对附近的人可见
                        </p>
                        <label class="ui-switch">
                            <input type="checkbox" checked="" />
                        </label>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="demo-item">
        <p class="demo-desc">表单下拉框</p>
        <div class="demo-block">
            <div class="ui-form ui-border-t">
                <form action="#">
                    <div class="ui-form-item ui-border-b">
                        <label>日期</label>
                        <div class="ui-select-group">
                            <div class="ui-select">
                                <select>
                                    <option>2014</option>
                                    <option selected="">2015</option>
                                    <option>2016</option>
                                </select>
                            </div>
                            <div class="ui-select">
                                <select>
                                    <option>03</option>
                                    <option selected="">04</option>
                                    <option>05</option>
                                </select>
                            </div>
                            <div class="ui-select">
                                <select>
                                    <option>21</option>
                                    <option selected="">22</option>
                                    <option>23</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="ui-form-item ui-border-b">
                        <label>日期</label>
                        <div class="ui-select">
                            <select>
                                <option>2014</option>
                                <option selected="">2015</option>
                                <option>2016</option>
                            </select>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="demo-item">
        <p class="demo-desc">表单单选项</p>
        <div class="demo-block">
            <div class="ui-form ui-border-t">
                <form action="#">
                    <div class="ui-form-item ui-form-item-radio ui-border-b">
                        
                        <label class="ui-radio" for="radio">
                            <input type="radio" name="radio" />
                        </label>
                        <p>表单中用于单选操作</p>
                    </div>
                    <div class="ui-form-item ui-form-item-radio ui-border-b">
                        
                        <label class="ui-radio" for="radio">
                            <input type="radio" checked="" name="radio" />
                        </label>
                        <p>表单中用于单选操作</p>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div class="demo-item">
        <p class="demo-desc">表单多选项,普通列表中多选项</p>
        <div class="demo-block">
            <div class="ui-form ui-border-t">
                <form action="#">
                    <div class="ui-form-item ui-form-item-checkbox ui-border-b">
                        <label class="ui-checkbox">
                            <input type="checkbox" />
                        </label>
                        <p>表单中用于多选操作</p>
                    </div>
                    <div class="ui-form-item ui-form-item-checkbox ui-border-b">
                        <label class="ui-checkbox">
                            <input type="checkbox" checked=""/>
                        </label>
                        <p>表单中用于多选操作</p>
                    </div>
                </form>
                <ul class="ui-list ui-list-text ui-list-checkbox ui-border-b">
                    <li class="ui-border-t">
                        <label class="ui-checkbox">
                            <input type="checkbox" />
                        </label>
                        <p>普通列表ui-list中用于多选操作</p>
                    </li>
                    <li class="ui-border-t">
                        <label class="ui-checkbox">
                            <input type="checkbox" checked="" />
                        </label>
                        <p>普通列表中用于多选操作</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="demo-item">
        <p class="demo-desc">多选框</p>
        <div class="demo-block">
            <p> 
                <label class="ui-checkbox-s">
                    <input type="checkbox" name="checkbox" checked="" />
                </label>
                 我已阅读并同意
            </p>
            <p>
                <label class="ui-checkbox-s">
                    <input type="checkbox" name="checkbox" checked="" />
                </label>
                 我已阅读并同意
            </p>
        </div>
    </div>
    <div class="demo-item">
        <p class="demo-desc">普通列表中单选项</p>
        <div class="demo-block">
            <ul class="ui-list ui-list-text ui-list-radio ui-border-tb">
                <li class="ui-border-t">
                    <label class="ui-radio" for="radio">
                        <input type="radio" name="radio" />
                    </label>
                    <p>普通列表中用于单选操作</p>
                </li>
                <li class="ui-border-t">
                    <label class="ui-radio" for="radio">
                        <input type="radio" checked="" name="radio" />
                    </label>
                    <p>普通列表中用于单选操作</p>
                </li>
            </ul>
        </div>
    </div>
    <div class="demo-item">
        <p class="demo-desc">普通输入框</p>
        <div class="demo-block">
            <section class="ui-input-wrap ui-border-t">
                <div class="ui-input ui-border-radius">
                    <input type="text" name="" value="" placeholder="我也说一句...">
                </div>
                <button class="ui-btn">评论</button>
            </section>
         </div>
    </div>
</section>
@@include('include/footer.html')